<template>
   <div class="container" v-if="show">
      <div v-if="title" class="title">{{ title }}</div>
      <div v-if="content" class="content">{{ content }}</div>
      <div class="btn">
         <button class="btn-item confirm" @click="confirm">确定</button>
         <button class="btn-item cancel" @click="cancel">取消</button>
      </div>
   </div>
</template>
<script setup>
   defineProps({
      title:{
         type:String,
         default:'',
      },
      content:{
         type:String,
         default:'',
      },
      show:{
         type:Boolean,
         default:false,
      }
   })
   const emits = defineEmits(['confirm','cancel']);

   const confirm = () => {
      emits('confirm');
   }

   const cancel = () => {
      emits('cancel');
   }
   

</script>
<style scoped>
.container{
   position: fixed;
   background-color: aliceblue;
   top:50%;
   left:0;
   right:0;
   bottom:0;
   margin:0 auto;
   margin-top:-100px;
   border-radius: 5%;
   width: 600px;
   height: 200px;
   /* min-height: 40px; */
   padding: 16px 12px;
   box-sizing: border-box;
   font-size:16px;
}
.title{
   text-align: center;
   line-height: 1.2;

}
.content{
   font-size:14px;
   line-height: 1.2;
   margin-top:20px;
}

.btn{
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top:20px;
}

.btn-item{
}
</style>
